<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-22 16:21
 * Desc: inviteFriends 邀请好友
 */
-->
<template>
  <yy-page class="friends">
    <view class="friends__content">
      <view class="friends__banner"></view>
      <view class="friends__main">
        <view class="friends__main--title">升级组长</view>
        <view class="mt25 mb60 fs28" style="color: #616161">完成下方任务后，即可升级为组长</view>
        <view class="mb100">
          <invite-box v-if="info.maxman != 0" :list="manList" src-key="avatar" id-key="id" @click="onInvite">
            <view slot="title" class="friends__invite--title">1、邀请{{ info.maxman }}个用户注册({{ (info.haveman && info.haveman.length) || 0 }}/{{ info.maxman }})</view>
          </invite-box>
        </view>
        <view>
          <invite-box v-if="info.maxorder != 0" :list="orderList" src-key="avatar" id-key="id" @click="onInvite">
            <view slot="title" class="friends__invite--title"
              ><text>{{ info.maxman == 0 ? '1' : '2' }}</text
              >、邀请{{ info.maxorder }}个新用户下单({{ (info.haveorder && info.haveorder.length) || 0 }}/{{ info.maxorder }})</view
            >
          </invite-box>
        </view>
      </view>
      <view class="friends__btn" @click="onInvite">邀请好友</view>
    </view>
    <invite-pop v-if="isShow" v-model="isShow" :obj="query" @click-item="onPartInInviteActivity"></invite-pop>
  </yy-page>
</template>
<script>
  import InviteBox from './components/InviteBox'
  import InvitePop from './components/InvitePop.vue'
  export default {
    components: { InviteBox, InvitePop },
    name: 'friends',
    data() {
      return {
        isShow: false,
        info: {},
        manList: [],
        query: {},
        orderList: []
      }
    },
    onLoad(option) {
      this.query = option
    },
    onShow() {
      this.init()
    },
    methods: {
      init() {
        uni.$api.user.getMemberMission().then((res) => {
          this.info = res || []
          this.manList = this.getListData('man')
          this.orderList = this.getListData('order')
        })
      },
      getListData(type) {
        const res = [...this.info[`have${type}`]]
        const addLen = +this.info[`max${type}`] - res.length
        for (let i = 0; i < addLen; i++) {
          res.push({
            id: '',
            avatar: ''
          })
        }
        return res
      },
      onInvite() {
        this.isShow = true
      },
      onPartInInviteActivity() {
        console.log('onPartInInviteActivity')
        if (this.query.registerActivityId) {
          uni.$api.activity.partInInviteActivity({
            activityId: this.query.registerActivityId
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .friends {
    &__banner {
      width: 750rpx;
      height: 551rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/banner-friends.png) no-repeat;
      background-size: 100%;
    }
    &__main {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      margin-top: -20rpx;
      width: 710rpx;
      height: 716rpx;
      background: #ffffff;
      border-radius: 20rpx;
    }
    &__main::after {
      position: absolute;
      content: '';
      top: 0;
      left: calc(50% + 197rpx);
      width: 0;
      height: 0;
      border-top: 5rpx solid #3ee4c8;
      border-right: 5rpx solid transparent;
      border-bottom: 5rpx solid transparent;
      border-left: 5rpx solid #3ee4c8;
    }
    &__main::before {
      position: absolute;
      content: '';
      top: 0;
      left: calc(50% - 206rpx);
      width: 0;
      height: 0;
      border-top: 5rpx solid #3ee4c8;
      border-right: 5rpx solid #3ee4c8;
      border-bottom: 5rpx solid transparent;
      border-left: 5rpx solid transparent;
    }
    &__main--title {
      width: 394rpx;
      height: 70rpx;
      background: linear-gradient(180deg, #3de6c5 0%, #51c2f5 100%);
      box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(66, 177, 229, 0.44);
      text-align: center;
      line-height: 70rpx;
      font-size: 40rpx;
      font-family: Alibaba PuHuiTi 2;
      color: #ffffff;
      border-radius: 0 0 21rpx 21rpx;
      font-weight: bold;
    }
    &__invite--title {
      margin-bottom: 53rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    &__btn {
      margin: 53rpx auto 56rpx;
      width: 710rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 18rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
</style>
